<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>Async | 个人博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="generator123456789101112131415161718192021222324252627282930313233343536373839404142434445464748&#x2F;&#x2F; generator 生成器 （生成迭代器的）&#x2F;&#x2F; promise 解决串行执行流程  并行执行流程  （因为promise依旧是基于回调的 onFulfilled onRejected）&#x2F;&#x2F; prom">
<meta property="og:type" content="article">
<meta property="og:title" content="Async">
<meta property="og:url" content="https://gitee.com/wieldy/bailment-blog/2022/03/29/async/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:description" content="generator123456789101112131415161718192021222324252627282930313233343536373839404142434445464748&#x2F;&#x2F; generator 生成器 （生成迭代器的）&#x2F;&#x2F; promise 解决串行执行流程  并行执行流程  （因为promise依旧是基于回调的 onFulfilled onRejected）&#x2F;&#x2F; prom">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/bailment-blog/images/down.png">
<meta property="article:published_time" content="2022-03-29T14:12:00.000Z">
<meta property="article:modified_time" content="2023-04-23T12:11:43.651Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/bailment-blog/images/down.png">
  
    <link rel="alternate" href="/bailment-blog/atom.xml" title="个人博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/bailment-blog/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/bailment-blog/css/style.css">

  
    
<link rel="stylesheet" href="/bailment-blog/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/bailment-blog/" id="logo">个人博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/bailment-blog/">Home</a>
        
          <a class="main-nav-link" href="/bailment-blog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/bailment-blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/wieldy/bailment-blog"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-async" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2022/03/29/async/" class="article-date">
  <time class="dt-published" datetime="2022-03-29T14:12:00.000Z" itemprop="datePublished">2022-03-29</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      Async
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ul>
<li>generator<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// generator 生成器 （生成迭代器的）</span></span><br><span class="line"><span class="comment">// promise 解决串行执行流程  并行执行流程  （因为promise依旧是基于回调的 onFulfilled onRejected）</span></span><br><span class="line"><span class="comment">// promise 并没有完全解决嵌套问题， 写异步代码的时候 还是不够优雅</span></span><br><span class="line"><span class="comment">// 就是让异步变成 更像同步变成  generator （数组的都有内置的迭代器）</span></span><br><span class="line"><span class="keyword">function</span>* <span class="title function_">read</span>(<span class="params"></span>) &#123; <span class="comment">// 默认会将一个函数分割成多个部分</span></span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;vite&#x27;</span>;</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;node&#x27;</span>; <span class="comment">// 产卵，输出一个值 ，每次遇到yield就停止</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> it = <span class="title function_">read</span>(); <span class="comment">// it.throw() 抛出错误的   it.next()</span></span><br><span class="line"><span class="comment">// console.log(it.next()); // &#123;value:这次输出的值,done:是否执行完毕&#125;</span></span><br><span class="line"><span class="comment">// console.log(it.next());</span></span><br><span class="line"><span class="comment">// console.log(it.next());</span></span><br><span class="line"><span class="comment">// console.log(it.next());</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 生成器 和 普通函数不一样  需要加* 配合yeild 使用</span></span><br><span class="line"><span class="comment">// 返回的是迭代器，每次执行需要调用next方法， 产出的结果有 value,done</span></span><br><span class="line"><span class="comment">// 当遇到done为true的时候表示结束</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 什么叫类数组？  索引、有长度、能遍历</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 我们可以通过&quot;元编程&quot;来修改属性本身的逻辑 本身不能迭代我可以添加迭代方法，本身没有类型我可以添加类型</span></span><br><span class="line"><span class="keyword">let</span> likeArray = &#123;</span><br><span class="line">    <span class="number">0</span>: <span class="number">1</span>, <span class="number">1</span>: <span class="number">2</span>, <span class="number">2</span>: <span class="number">3</span>, <span class="attr">length</span>: <span class="number">3</span>,</span><br><span class="line">    get [<span class="title class_">Symbol</span>.<span class="property">toStringTag</span>]() &#123; <span class="comment">// 这个就表示重写了toString方法</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;MyArray&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    [<span class="title class_">Symbol</span>.<span class="property">iterator</span>]: <span class="keyword">function</span>* () &#123;</span><br><span class="line">        <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">        <span class="keyword">let</span> len = <span class="variable language_">this</span>.<span class="property">length</span></span><br><span class="line">        <span class="keyword">while</span> (len !== index) &#123;</span><br><span class="line">            <span class="keyword">yield</span> <span class="variable language_">this</span>[index++]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* [Symbol.iterator]() &#123; // 正在的函数</span></span><br><span class="line"><span class="comment">        let index = 0;</span></span><br><span class="line"><span class="comment">        return &#123;</span></span><br><span class="line"><span class="comment">            next: () =&gt; &#123;</span></span><br><span class="line"><span class="comment">                return &#123; value: this[index], done: index++ == this.length &#125;</span></span><br><span class="line"><span class="comment">            &#125;</span></span><br><span class="line"><span class="comment">        &#125;</span></span><br><span class="line"><span class="comment">    &#125; */</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// console.log(likeArray.toString())</span></span><br><span class="line"><span class="comment">// console.log(Array.from(likeArray));</span></span><br><span class="line"><span class="keyword">let</span> arr = [...likeArray]</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span><br><span class="line"><span class="comment">// likeArray is not iterable</span></span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* function* read() &#123;</span></span><br><span class="line"><span class="comment">    let a = yield &#x27;vue&#x27;;</span></span><br><span class="line"><span class="comment">    console.log(a, &#x27;a&#x27;)</span></span><br><span class="line"><span class="comment">    let b = yield &#x27;vite&#x27;;</span></span><br><span class="line"><span class="comment">    console.log(b, &#x27;b&#x27;)</span></span><br><span class="line"><span class="comment">    let c = yield &#x27;node&#x27;;</span></span><br><span class="line"><span class="comment">    console.log(c, &#x27;c&#x27;)</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">let it = read(); // 返回一个迭代器</span></span><br><span class="line"><span class="comment">console.log(it.next()); // 每次调用next 遇到yield就停止</span></span><br><span class="line"><span class="comment">console.log(it.next(&#x27;aaa&#x27;)); // 调用next的时候可以给上一次yield的结果赋值, 如果没有上一次则传参无意义</span></span><br><span class="line"><span class="comment">console.log(it.next(&#x27;bbb&#x27;));</span></span><br><span class="line"><span class="comment">console.log(it.next(&#x27;ccc&#x27;)); */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 每次调用的时候遇到yield就停止</span></span><br><span class="line"><span class="comment">// 下一次next传递的参数 是上一次的返回值</span></span><br><span class="line"><span class="comment">// it.throw 抛出的异常可以在代码中被捕获</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// yield产出的结果 可以等待产出的结果执行完毕后 ，在继续向下执行</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>).<span class="property">promises</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">function</span>* <span class="title function_">read</span>(<span class="params"></span>) &#123; <span class="comment">// 这个逻辑更像同步的，但是底层我们可以变写成异步的</span></span><br><span class="line">    <span class="keyword">let</span> name = <span class="keyword">yield</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;name.txt&#x27;</span>), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line">    <span class="keyword">let</span> age = <span class="keyword">yield</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, name), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异步串行 需要用递归来解决, 自己实现了一个迭代器 ，用来迭代generator函数</span></span><br><span class="line"><span class="comment">// const co = require(&#x27;co&#x27;)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">co</span>(<span class="params">it</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">function</span> <span class="title function_">next</span>(<span class="params">data</span>) &#123;</span><br><span class="line">            <span class="keyword">let</span> &#123; value, done &#125; = it.<span class="title function_">next</span>(data);</span><br><span class="line">            <span class="keyword">if</span> (!done) &#123;</span><br><span class="line">                <span class="title class_">Promise</span>.<span class="title function_">resolve</span>(value).<span class="title function_">then</span>(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">                    <span class="title function_">next</span>(data)</span><br><span class="line">                &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">                    <span class="title function_">reject</span>(err);</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="title function_">resolve</span>(value);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title function_">next</span>();</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">co</span>(<span class="title function_">read</span>()).<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// let it = read();</span></span><br><span class="line"><span class="comment">// let &#123; value, done &#125; = it.next();</span></span><br><span class="line"><span class="comment">// if (!done) &#123;</span></span><br><span class="line"><span class="comment">//     value.then(data =&gt; &#123;</span></span><br><span class="line"><span class="comment">//         let &#123; value, done &#125; = it.next(data)</span></span><br><span class="line"><span class="comment">//         if (!done) &#123;</span></span><br><span class="line"><span class="comment">//             value.then(data =&gt; &#123;</span></span><br><span class="line"><span class="comment">//                 let &#123; value, done &#125; = it.next(data);</span></span><br><span class="line"><span class="comment">//                 if (done) &#123;</span></span><br><span class="line"><span class="comment">//                     console.log(value)</span></span><br><span class="line"><span class="comment">//                 &#125;</span></span><br><span class="line"><span class="comment">//             &#125;).catch((e) =&gt; &#123;</span></span><br><span class="line"><span class="comment">//                 it.throw(e)</span></span><br><span class="line"><span class="comment">//             &#125;)</span></span><br><span class="line"><span class="comment">//         &#125;</span></span><br><span class="line"><span class="comment">//     &#125;).catch((e) =&gt; &#123;</span></span><br><span class="line"><span class="comment">//         it.throw(e)</span></span><br><span class="line"><span class="comment">//     &#125;)</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>generator-imp<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> regeneratorRuntime = &#123;</span><br><span class="line">    <span class="title function_">mark</span>(<span class="params">gen</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> gen</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">wrap</span>(<span class="params">iteratorFn</span>) &#123; <span class="comment">// 此函数iteratorFn会执行多次</span></span><br><span class="line">        <span class="keyword">const</span> _context = &#123;</span><br><span class="line">            <span class="attr">next</span>: <span class="number">0</span>,</span><br><span class="line">            <span class="attr">sent</span>: <span class="literal">null</span>, <span class="comment">// 下一次调用next的时候 传递的参数 会赋予给上一次的返回值</span></span><br><span class="line">            <span class="attr">done</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="title function_">stop</span>(<span class="params"></span>) &#123;</span><br><span class="line">                _context.<span class="property">done</span> = <span class="literal">true</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> &#123; <span class="comment">// it</span></span><br><span class="line">            <span class="title function_">next</span>(<span class="params">v</span>) &#123; <span class="comment">// value 就是上一次yield的返回值</span></span><br><span class="line">                _context.<span class="property">sent</span> = v; <span class="comment">// 每次调用next时会将用户的参数保存到sent上</span></span><br><span class="line">                <span class="keyword">let</span> value = <span class="title function_">iteratorFn</span>(_context);</span><br><span class="line">                <span class="keyword">return</span> &#123; value, <span class="attr">done</span>: _context.<span class="property">done</span> &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> _marked = <span class="comment">/*#__PURE__*/</span>regeneratorRuntime.<span class="title function_">mark</span>(read);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">read</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> a, b, c;</span><br><span class="line">    <span class="keyword">return</span> regeneratorRuntime.<span class="title function_">wrap</span>(<span class="keyword">function</span> <span class="title function_">read$</span>(<span class="params">_context</span>) &#123;</span><br><span class="line">        <span class="keyword">while</span> (<span class="number">1</span>) &#123; <span class="comment">// while(true) 表示这个东西是一个状态机，根据状态的变化实现对应的逻辑， 这个逻辑会走多次</span></span><br><span class="line">            <span class="keyword">switch</span> (_context.<span class="property">prev</span> = _context.<span class="property">next</span>) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">                    _context.<span class="property">next</span> = <span class="number">2</span>;</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">                    a = _context.<span class="property">sent</span>;</span><br><span class="line">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, <span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">                    _context.<span class="property">next</span> = <span class="number">6</span>;</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;vite&#x27;</span>;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">                    b = _context.<span class="property">sent</span>;</span><br><span class="line">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(b, <span class="string">&#x27;b&#x27;</span>);</span><br><span class="line">                    _context.<span class="property">next</span> = <span class="number">10</span>;</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;node&#x27;</span>;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">                    c = _context.<span class="property">sent</span>;</span><br><span class="line">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(c, <span class="string">&#x27;c&#x27;</span>);</span><br><span class="line"></span><br><span class="line">                <span class="keyword">case</span> <span class="number">12</span>:</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&quot;end&quot;</span>:</span><br><span class="line">                    <span class="keyword">return</span> _context.<span class="title function_">stop</span>();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, _marked);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> it = <span class="title function_">read</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(it.<span class="title function_">next</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(it.<span class="title function_">next</span>(<span class="string">&#x27;aaa&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(it.<span class="title function_">next</span>(<span class="string">&#x27;bbb&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(it.<span class="title function_">next</span>(<span class="string">&#x27;ccc&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// wrap 的使用会传入编译后的函数（变成了switch case的模式将一个函数进行了拆分，根据_context.next 来决定执行对应的逻辑）</span></span><br><span class="line"><span class="comment">//  wrap函数的返回结果是迭代器迭代器要有next方法 （next函数）</span></span><br><span class="line"><span class="comment">// 每次用户会调用next方法，传入对应的值， 这个值会被保留在_context.sent上， 走下一次调用函数的时候将其取出赋值给变量</span></span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>).<span class="property">promises</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">read</span>(<span class="params"></span>) &#123; <span class="comment">// 这个逻辑更像同步的，但是底层我们可以变写成异步的</span></span><br><span class="line">    <span class="keyword">let</span> name = <span class="keyword">await</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;name.txt&#x27;</span>), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line">    <span class="keyword">let</span> age = <span class="keyword">await</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, name), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">read</span>().<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// async - await  = generator + co</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// generator + co 是async 和await的语法糖</span></span><br><span class="line"><span class="comment">// async 函数返回的是一个promise</span></span><br><span class="line"><span class="comment">// 内部是基于generator的所以可以使用try &#123;&#125; catch语法 ，如果出现异常可以通过 promise.catch来捕获</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// generator 可以配合promise 但是需要有co 来实现流程控制</span></span><br><span class="line"><span class="comment">// promise 配合 async + await 来实现流程控制</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 异步的发展流程  回调 -》 promise -》 generator + co -》  async / await</span></span><br><span class="line"><span class="comment">// 浏览器的事件环 （js是单线程的 不考虑webworker）</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>5.async-await-imp</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="comment">// co </span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">asyncGeneratorStep</span>(<span class="params">gen, resolve, reject, _next, _throw, key, arg</span>) &#123; <span class="comment">// key -》 next /throw</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> info = gen[key](arg);  <span class="comment">// it.next(arg)</span></span><br><span class="line">        <span class="keyword">var</span> value = info.<span class="property">value</span>;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        <span class="title function_">reject</span>(error); <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (info.<span class="property">done</span>) &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(value);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="title class_">Promise</span>.<span class="title function_">resolve</span>(value).<span class="title function_">then</span>(_next, _throw);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_asyncToGenerator</span>(<span class="params">fn</span>) &#123; <span class="comment">// fn 就是一个generator</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> self = <span class="variable language_">this</span>, args = <span class="variable language_">arguments</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">            <span class="keyword">var</span> gen = fn.<span class="title function_">apply</span>(self, args); <span class="comment">// 获取到iterator， 因为生成器执行完毕后返回的是迭代器</span></span><br><span class="line">            <span class="keyword">function</span> <span class="title function_">_next</span>(<span class="params">value</span>) &#123;</span><br><span class="line">                <span class="title function_">asyncGeneratorStep</span>(gen, resolve, reject, _next, _throw, <span class="string">&quot;next&quot;</span>, value);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">function</span> <span class="title function_">_throw</span>(<span class="params">err</span>) &#123;</span><br><span class="line">                <span class="title function_">asyncGeneratorStep</span>(gen, resolve, reject, _next, _throw, <span class="string">&quot;throw&quot;</span>, err);</span><br><span class="line">            &#125; <span class="title function_">_next</span>(<span class="literal">undefined</span>);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">read</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> _read.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_read</span>(<span class="params"></span>) &#123;</span><br><span class="line">    _read = <span class="title function_">_asyncToGenerator</span>(regeneratorRuntime.<span class="title function_">mark</span>(<span class="keyword">function</span> <span class="title function_">_callee</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> name, age;</span><br><span class="line">        <span class="keyword">return</span> regeneratorRuntime.<span class="title function_">wrap</span>(<span class="keyword">function</span> <span class="title function_">_callee$</span>(<span class="params">_context</span>) &#123;</span><br><span class="line">            <span class="keyword">while</span> (<span class="number">1</span>) &#123;</span><br><span class="line">                <span class="keyword">switch</span> (_context.<span class="property">prev</span> = _context.<span class="property">next</span>) &#123;</span><br><span class="line">                    <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">                        _context.<span class="property">next</span> = <span class="number">2</span>;</span><br><span class="line">                        <span class="keyword">return</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;name.txt&#x27;</span>), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line"></span><br><span class="line">                    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">                        name = _context.<span class="property">sent</span>;</span><br><span class="line">                        _context.<span class="property">next</span> = <span class="number">5</span>;</span><br><span class="line">                        <span class="keyword">return</span> fs.<span class="title function_">readFile</span>(path.<span class="title function_">resolve</span>(__dirname, name), <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line"></span><br><span class="line">                    <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">                        age = _context.<span class="property">sent</span>;</span><br><span class="line">                        <span class="keyword">return</span> _context.<span class="title function_">abrupt</span>(<span class="string">&quot;return&quot;</span>, age);</span><br><span class="line"></span><br><span class="line">                    <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">                    <span class="keyword">case</span> <span class="string">&quot;end&quot;</span>:</span><br><span class="line">                        <span class="keyword">return</span> _context.<span class="title function_">stop</span>();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;, _callee);</span><br><span class="line">    &#125;));</span><br><span class="line">    <span class="keyword">return</span> _read.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//1) async 方法会变成一个promise</span></span><br><span class="line"><span class="comment">//2) </span></span><br></pre></td></tr></table></figure>
</li>
<li><p>eventLoop<br>基本的概念  进程和线程之间的关系<br>计算机分配任务是以进程来分配的 ， 进程中包含着线程</p>
</li>
</ul>
<p>浏览器是一个进程  而且是一个多进程模型 （多进程的好处就是其中一个进程挂掉了，不会影响其他进程）<br>一个tab就是一个独立的进程<br>浏览器默认要有一个主进程，来调度其他进程  （进程间的通信）<br>网络进程  发送http请求等<br>插件也有独立的进程<br>gpu绘图进程<br>一个tab就是一个独立的进程 (渲染进程)</p>
<p>渲染进程 (线程)<br>ui 渲染线程  负责页面渲染，布局，绘制<br>js 引擎线程  执行js代码的</p>
<p>互斥的：js可以操作dom ，渲染需要dom  如果正在渲染页面时，渲染到一半了如果js要求把dom删除掉？<br>js也是单线程的， 由于如果js是多线程操作dom的会导致 一个线程说我要添加一个节点， 另一个说我要删除节点？</p>
<p>js也是单线程的 指代的是主线程 （默认代码从上到下依次执行）<br>定时器， 发请求， 用户事件 （在主线程执行的时候 还会创建一些独立的线程）</p>
<p>异步 ： 为异步任务划分优先级<br>宏任务和微任务执行时机不一样<br>宏任务 macro-task： 写的script脚本， ui渲染，定时器(setTimeout)， 发请求， 用户事件，messageChannel, setImmediate(ie下有，比setTimeout性能好)</p>
<p>微任务 micro-task： Promise.then(语言本身提供的)， queueMicrotashk  MutationObserver （异步监控dom的变化）</p>
<p>requestFrameAnimation requestAdleCallback (发生在渲染里的， 就是个回调函数， 这个东西不应该分到宏任务和微任务中)</p>
<p>js 执行的顺序怎么定义呢？ 先执行完当前同步代码，再去执行异步代码。 有一个单独的线程来扫描异步任务 事件触发线程EventLoop</p>
<p>代码执行的过程的时候 会产生微任务和宏任务<br>当发生的宏任务时间到达的时候会被发入到宏任务队列中 (放入是回调) 宏任务只有一个队列<br>微任务是立刻放到队列中 （每次执行宏任务的时候会产生一个微任务队列）</p>
<p>当前宏任务执行完毕后，会清空本轮产生的微任务, 如果执行微任务的时候又产生了微任务，会放到当前微任务的尾部<br>看一眼要不要渲染页面？ 要渲染就渲染（requestFrameAnimation requestAdleCallback） 刷新频率 16.6ms</p>
<p>再去扫描宏任务队列，如果有则取出第一个宏任务 ， 再去执行</p>
<p>每次微任务是执行一批 ， 宏任务是执行一个</p>
<p><img src="/bailment-blog/images/down.png"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 打印的结果</span></span><br><span class="line"><span class="comment">// 页面渲染的颜色 会不会从 red -&gt; yellow</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>)</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&#x27;yellow&#x27;</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>);</span><br><span class="line"><span class="comment">// 渲染逻辑可能是在宏任务之后</span></span><br><span class="line"><span class="comment">// 1 3 2  yellow</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Promise1&#x27;</span>)</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;setTimeout2&#x27;</span>)</span><br><span class="line">        &#125;, <span class="number">0</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;setTimeout1&#x27;</span>);</span><br><span class="line">        <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Promise2&#x27;</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 微任务队列 ： [Promise2]</span></span><br><span class="line">    <span class="comment">// 宏任务队列: [setTimeout1,setTimeout2]</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// Promise1</span></span><br><span class="line">    <span class="comment">// setTimeout1</span></span><br><span class="line">    <span class="comment">// Promise2</span></span><br><span class="line">    <span class="comment">// setTimeout2</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">button.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;listener1&#x27;</span>);</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;micro task1&#x27;</span>))</span><br><span class="line">&#125;)</span><br><span class="line">button.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;listener2&#x27;</span>);</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;micro task2&#x27;</span>))</span><br><span class="line">&#125;)</span><br><span class="line">button.<span class="title function_">click</span>(); <span class="comment">// click1() click2()</span></span><br><span class="line"><span class="comment">// 默认 21 行 和 点击的时候的区别是什么？</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br><span class="line">        <span class="keyword">await</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>); <span class="comment">// Promise.resolve(console.log(3)).then(()=&gt;&#123; console.log(4)&#125;)</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">4</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span>);</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line">    <span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">6</span>);</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="number">7</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    promise.<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="title function_">async</span>();</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">8</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 微任务队列  [7,4]</span></span><br><span class="line">    <span class="comment">// 1   6     2     3      8    7     4       5</span></span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2022/03/29/async/" data-id="cljmgj1ev000bzc9jflgged0p" data-title="Async" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/bailment-blog/2022/03/29/Promise/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Promise
        
      </div>
    </a>
  
  
    <a href="/bailment-blog/2022/03/29/buffer/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">buffer</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/07/">July 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/06/">June 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/04/">April 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/03/">March 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/29/payMent/">payMent</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/bailment-blog/" class="mobile-nav-link">Home</a>
  
    <a href="/bailment-blog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/bailment-blog/js/jquery-3.4.1.min.js"></script>



  
<script src="/bailment-blog/fancybox/jquery.fancybox.min.js"></script>




<script src="/bailment-blog/js/script.js"></script>





  </div>
</body>
</html>